<style lang="scss" scoped>
.pro_con {
  display: flex;
  align-items: center;
  .pro_item_con {
    width: calc(100% - 100px);
  }
  .second_text_con {
    width: 100px;
    font-size: 15px;
    color: #1890ff;
    text-align: center;
  }
}
</style>
<template>
  <div class="pro_con">
    <div class="pro_item_con">
      <el-progress
        :show-text="false"
        :stroke-width="20"
        :percentage="percentage"
        status="success"
      ></el-progress>
    </div>
    <div class="second_text_con">{{ countNum }} S</div>
  </div>
</template>

<script>
var countId = null;
export default {
  name: "progressSecond",
  props: {
    startGetWd: {
      type: Boolean,
      default: false,
    },
    endDis: {
      type: Boolean,
      default: true,
    },
    test_time: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    startGetWd: {
      handler(val) {
        if (val) {
          //开始计时
          this.startCounting();
        } else {
          clearInterval(countId);
        }
      },
    },
    endDis: {
      //测试结束
      handler(val) {
        if (val) {
          this.percentage = 100;
        }
      },
    },
  },
  data() {
    return {
      countNum: 0,
      percentage: 0, // 进度条百分比
    };
  },
  mounted() {},
  methods: {
    startCounting() {
      let that = this;
      that.countNum = 0;
      countId = setInterval(() => {
        if (that.percentage < 100) {
          that.countNum++;
        }
        if (that.percentage < 90) {
          that.percentage += 100 / that.test_time;
        } else {
          if (that.percentage < 99) {
            that.percentage++;
          }
        }
      }, 1000);
    },
    testStartFun() {
      this.percentage = 0;
    },
  },
};
</script>
